﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.Jcrop.min.js" type="text/javascript"></script>
    <link href="Scripts/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
    <style> .none{ display: none;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script>
            //上传图片按钮单击事件
            function picclick() {
                if (document.all)
                    document.getElementById("btnupload").click();
                else {
                    var evt = document.createEvent("MouseEvents");
                    evt.initEvent("click", true, true);
                    document.getElementById("btnupload").dispatchEvent(evt);
                }
            }
        </script>
        <%-- 上传控件--%>
        <input type="file" name="photo" runat="server" onchange="picclick()" id="photoFile" />
        <asp:Button ID="btnupload" runat="server" CssClass="none" Text="Button" OnClick="btnupload_Click" />
        <p>裁剪前头像(504*374)</p>
        <div class="big" style="width: 504px; height: 374px; overflow: hidden;">
            <img id="photo" runat="server" src="image/0130830091530.jpg" />
        </div>
        <p> 裁剪后头像(120*150)</p>
        <div style="width: 120px; height: 150px; border: 1px solid #dedede; overflow: hidden;">
            <img id="preview" runat="server" src="image/0130830091530.jpg" /></div>
        <%--  x--%>
        <input type="hidden" runat="server" id="px" />
        <%--   y--%>
        <input type="hidden" runat="server" id="py" />
        <%-- width--%>
        <input type="hidden" runat="server" id="pw" />
        <%-- heigh--%>
        <input type="hidden" runat="server" id="ph" />
        <%-- path--%>
        <input type="hidden" runat="server" id="ppath" />
        <input type="button" class="btn" onclick="save();" id="btnEnter" value="保存剪切">
        <span style="color: Red;" runat="server" id="tipMsg"></span>
        <script type="text/javascript">
            //保存剪切后的图片
            function save() {
                $.ajax({
                    type: "POST",
                    url: "AvatarService.ashx",
                    data: { myaction: "save", pw: $("#pw").val(),
                        ph: $("#ph").val(), px: $("#px").val(),
                        py: $("#py").val(), ppath: $("#ppath").val()
                    }
                , beforeSend: function () {
                    $("#tipMsg").html("");
                }, success: function (msg) {
                    $("#tipMsg").html(msg);
                    if (msg.indexOf("成功") != -1) {
                        setTimeout('window.location.href = "Default.aspx";', 2000);
                    }
                }, error: function (error) {
                    $("#tipMsg").html(error);
                }
                });
            }
            //            大图片
            $('#photo').Jcrop({
                onChange: showPreview, //选择大图片时执行的事件
                onSelect: setsize, //选择完成后执行的事件
                onRelease: hidePreview,
                aspectRatio: 120 / 150//选择图片的比率
            });
            //            //小图片
            var $preview = $('#preview');
            function showPreview(coords) {
                if (parseInt(coords.w) > 0) {
                    var rx = 120 / coords.w;
                    var ry = 150 / coords.h;
                    previewshow(rx, ry, coords.x, coords.y)
                }
            }
            //显示剪切效果
            function previewshow(rx, ry, x, y) {
                $preview.css({
                    width: Math.round(rx * 500) + 'px',
                    height: Math.round(ry * 370) + 'px',
                    marginLeft: '-' + Math.round(rx * x) + 'px',
                    marginTop: '-' + Math.round(ry * y) + 'px'
                }).show();
            }
            //设置参数
            function hidePreview() {
                $preview.stop().fadeOut('fast');
            }
            //选择后设置各个参数
            function setsize(coords, e) {
                $("#pw").val(coords.w);
                $("#ph").val(coords.h);
                $("#px").val(coords.x);
                $("#py").val(coords.y);
                coords.x = 0;
            }
        </script>
    </div>
    </form>
</body>
</html>
